<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8"/>
    <title>Gomoku game</title>
    <style>
     body {
	 display: flex;
	 align-items: center;
	 justify-content: center;
     }
     svg {
	 box-shadow: 2px 2px 10px 10px;
	 border-radius: 7px;
	 border: 2px solid;
	 background: darksalmon;
     }
     circle {
	 fill: rgba(0, 0, 0, 0);
     }
     .black {
	 fill: #000;
     }
     .white {
	 fill: #fff;
     }
     .board {
	 margin: 20px;
     }
    </style>
  </head>
  <body>
    <div class="board">
      选择对手
      <select id="gen">
      </select>
      <button id="playB"><h3>执黑</h3></button>
      <button id="playW"><h3>执白</h3></button>
    </div>
    <div>
      <svg width="450px" height="450px" role="img">
		<line x1="15" x2="435" y1="14" y2="16" stroke="#000" />
		<line x1="14" x2="16" y1="15" y2="435" stroke="#000" />
		<line x1="15" x2="435" y1="44" y2="46" stroke="#000" />
		<line x1="44" x2="46" y1="15" y2="435" stroke="#000" />
		<line x1="15" x2="435" y1="74" y2="76" stroke="#000" />
		<line x1="74" x2="76" y1="15" y2="435" stroke="#000" />
		<line x1="15" x2="435" y1="104" y2="106" stroke="#000" />
		<line x1="104" x2="106" y1="15" y2="435" stroke="#000" />
		<line x1="15" x2="435" y1="134" y2="136" stroke="#000" />
		<line x1="134" x2="136" y1="15" y2="435" stroke="#000" />
		<line x1="15" x2="435" y1="164" y2="166" stroke="#000" />
		<line x1="164" x2="166" y1="15" y2="435" stroke="#000" />
		<line x1="15" x2="435" y1="194" y2="196" stroke="#000" />
		<line x1="194" x2="196" y1="15" y2="435" stroke="#000" />
		<line x1="15" x2="435" y1="224" y2="226" stroke="#000" />
		<line x1="224" x2="226" y1="15" y2="435" stroke="#000" />
		<line x1="15" x2="435" y1="254" y2="256" stroke="#000" />
		<line x1="254" x2="256" y1="15" y2="435" stroke="#000" />
		<line x1="15" x2="435" y1="284" y2="286" stroke="#000" />
		<line x1="284" x2="286" y1="15" y2="435" stroke="#000" />
		<line x1="15" x2="435" y1="314" y2="316" stroke="#000" />
		<line x1="314" x2="316" y1="15" y2="435" stroke="#000" />
		<line x1="15" x2="435" y1="344" y2="346" stroke="#000" />
		<line x1="344" x2="346" y1="15" y2="435" stroke="#000" />
		<line x1="15" x2="435" y1="374" y2="376" stroke="#000" />
		<line x1="374" x2="376" y1="15" y2="435" stroke="#000" />
		<line x1="15" x2="435" y1="404" y2="406" stroke="#000" />
		<line x1="404" x2="406" y1="15" y2="435" stroke="#000" />
		<line x1="15" x2="435" y1="434" y2="436" stroke="#000" />
		<line x1="434" x2="436" y1="15" y2="435" stroke="#000" />
		<circle id="0" cx="15" cy="15" r="13" />
		<circle id="1" cx="15" cy="45" r="13" />
		<circle id="2" cx="15" cy="75" r="13" />
		<circle id="3" cx="15" cy="105" r="13" />
		<circle id="4" cx="15" cy="135" r="13" />
		<circle id="5" cx="15" cy="165" r="13" />
		<circle id="6" cx="15" cy="195" r="13" />
		<circle id="7" cx="15" cy="225" r="13" />
		<circle id="8" cx="15" cy="255" r="13" />
		<circle id="9" cx="15" cy="285" r="13" />
		<circle id="10" cx="15" cy="315" r="13" />
		<circle id="11" cx="15" cy="345" r="13" />
		<circle id="12" cx="15" cy="375" r="13" />
		<circle id="13" cx="15" cy="405" r="13" />
		<circle id="14" cx="15" cy="435" r="13" />
		<circle id="15" cx="45" cy="15" r="13" />
		<circle id="16" cx="45" cy="45" r="13" />
		<circle id="17" cx="45" cy="75" r="13" />
		<circle id="18" cx="45" cy="105" r="13" />
		<circle id="19" cx="45" cy="135" r="13" />
		<circle id="20" cx="45" cy="165" r="13" />
		<circle id="21" cx="45" cy="195" r="13" />
		<circle id="22" cx="45" cy="225" r="13" />
		<circle id="23" cx="45" cy="255" r="13" />
		<circle id="24" cx="45" cy="285" r="13" />
		<circle id="25" cx="45" cy="315" r="13" />
		<circle id="26" cx="45" cy="345" r="13" />
		<circle id="27" cx="45" cy="375" r="13" />
		<circle id="28" cx="45" cy="405" r="13" />
		<circle id="29" cx="45" cy="435" r="13" />
		<circle id="30" cx="75" cy="15" r="13" />
		<circle id="31" cx="75" cy="45" r="13" />
		<circle id="32" cx="75" cy="75" r="13" />
		<circle id="33" cx="75" cy="105" r="13" />
		<circle id="34" cx="75" cy="135" r="13" />
		<circle id="35" cx="75" cy="165" r="13" />
		<circle id="36" cx="75" cy="195" r="13" />
		<circle id="37" cx="75" cy="225" r="13" />
		<circle id="38" cx="75" cy="255" r="13" />
		<circle id="39" cx="75" cy="285" r="13" />
		<circle id="40" cx="75" cy="315" r="13" />
		<circle id="41" cx="75" cy="345" r="13" />
		<circle id="42" cx="75" cy="375" r="13" />
		<circle id="43" cx="75" cy="405" r="13" />
		<circle id="44" cx="75" cy="435" r="13" />
		<circle id="45" cx="105" cy="15" r="13" />
		<circle id="46" cx="105" cy="45" r="13" />
		<circle id="47" cx="105" cy="75" r="13" />
		<circle id="48" cx="105" cy="105" r="13" />
		<circle id="49" cx="105" cy="135" r="13" />
		<circle id="50" cx="105" cy="165" r="13" />
		<circle id="51" cx="105" cy="195" r="13" />
		<circle id="52" cx="105" cy="225" r="13" />
		<circle id="53" cx="105" cy="255" r="13" />
		<circle id="54" cx="105" cy="285" r="13" />
		<circle id="55" cx="105" cy="315" r="13" />
		<circle id="56" cx="105" cy="345" r="13" />
		<circle id="57" cx="105" cy="375" r="13" />
		<circle id="58" cx="105" cy="405" r="13" />
		<circle id="59" cx="105" cy="435" r="13" />
		<circle id="60" cx="135" cy="15" r="13" />
		<circle id="61" cx="135" cy="45" r="13" />
		<circle id="62" cx="135" cy="75" r="13" />
		<circle id="63" cx="135" cy="105" r="13" />
		<circle id="64" cx="135" cy="135" r="13" />
		<circle id="65" cx="135" cy="165" r="13" />
		<circle id="66" cx="135" cy="195" r="13" />
		<circle id="67" cx="135" cy="225" r="13" />
		<circle id="68" cx="135" cy="255" r="13" />
		<circle id="69" cx="135" cy="285" r="13" />
		<circle id="70" cx="135" cy="315" r="13" />
		<circle id="71" cx="135" cy="345" r="13" />
		<circle id="72" cx="135" cy="375" r="13" />
		<circle id="73" cx="135" cy="405" r="13" />
		<circle id="74" cx="135" cy="435" r="13" />
		<circle id="75" cx="165" cy="15" r="13" />
		<circle id="76" cx="165" cy="45" r="13" />
		<circle id="77" cx="165" cy="75" r="13" />
		<circle id="78" cx="165" cy="105" r="13" />
		<circle id="79" cx="165" cy="135" r="13" />
		<circle id="80" cx="165" cy="165" r="13" />
		<circle id="81" cx="165" cy="195" r="13" />
		<circle id="82" cx="165" cy="225" r="13" />
		<circle id="83" cx="165" cy="255" r="13" />
		<circle id="84" cx="165" cy="285" r="13" />
		<circle id="85" cx="165" cy="315" r="13" />
		<circle id="86" cx="165" cy="345" r="13" />
		<circle id="87" cx="165" cy="375" r="13" />
		<circle id="88" cx="165" cy="405" r="13" />
		<circle id="89" cx="165" cy="435" r="13" />
		<circle id="90" cx="195" cy="15" r="13" />
		<circle id="91" cx="195" cy="45" r="13" />
		<circle id="92" cx="195" cy="75" r="13" />
		<circle id="93" cx="195" cy="105" r="13" />
		<circle id="94" cx="195" cy="135" r="13" />
		<circle id="95" cx="195" cy="165" r="13" />
		<circle id="96" cx="195" cy="195" r="13" />
		<circle id="97" cx="195" cy="225" r="13" />
		<circle id="98" cx="195" cy="255" r="13" />
		<circle id="99" cx="195" cy="285" r="13" />
		<circle id="100" cx="195" cy="315" r="13" />
		<circle id="101" cx="195" cy="345" r="13" />
		<circle id="102" cx="195" cy="375" r="13" />
		<circle id="103" cx="195" cy="405" r="13" />
		<circle id="104" cx="195" cy="435" r="13" />
		<circle id="105" cx="225" cy="15" r="13" />
		<circle id="106" cx="225" cy="45" r="13" />
		<circle id="107" cx="225" cy="75" r="13" />
		<circle id="108" cx="225" cy="105" r="13" />
		<circle id="109" cx="225" cy="135" r="13" />
		<circle id="110" cx="225" cy="165" r="13" />
		<circle id="111" cx="225" cy="195" r="13" />
		<circle id="112" cx="225" cy="225" r="13" />
		<circle id="113" cx="225" cy="255" r="13" />
		<circle id="114" cx="225" cy="285" r="13" />
		<circle id="115" cx="225" cy="315" r="13" />
		<circle id="116" cx="225" cy="345" r="13" />
		<circle id="117" cx="225" cy="375" r="13" />
		<circle id="118" cx="225" cy="405" r="13" />
		<circle id="119" cx="225" cy="435" r="13" />
		<circle id="120" cx="255" cy="15" r="13" />
		<circle id="121" cx="255" cy="45" r="13" />
		<circle id="122" cx="255" cy="75" r="13" />
		<circle id="123" cx="255" cy="105" r="13" />
		<circle id="124" cx="255" cy="135" r="13" />
		<circle id="125" cx="255" cy="165" r="13" />
		<circle id="126" cx="255" cy="195" r="13" />
		<circle id="127" cx="255" cy="225" r="13" />
		<circle id="128" cx="255" cy="255" r="13" />
		<circle id="129" cx="255" cy="285" r="13" />
		<circle id="130" cx="255" cy="315" r="13" />
		<circle id="131" cx="255" cy="345" r="13" />
		<circle id="132" cx="255" cy="375" r="13" />
		<circle id="133" cx="255" cy="405" r="13" />
		<circle id="134" cx="255" cy="435" r="13" />
		<circle id="135" cx="285" cy="15" r="13" />
		<circle id="136" cx="285" cy="45" r="13" />
		<circle id="137" cx="285" cy="75" r="13" />
		<circle id="138" cx="285" cy="105" r="13" />
		<circle id="139" cx="285" cy="135" r="13" />
		<circle id="140" cx="285" cy="165" r="13" />
		<circle id="141" cx="285" cy="195" r="13" />
		<circle id="142" cx="285" cy="225" r="13" />
		<circle id="143" cx="285" cy="255" r="13" />
		<circle id="144" cx="285" cy="285" r="13" />
		<circle id="145" cx="285" cy="315" r="13" />
		<circle id="146" cx="285" cy="345" r="13" />
		<circle id="147" cx="285" cy="375" r="13" />
		<circle id="148" cx="285" cy="405" r="13" />
		<circle id="149" cx="285" cy="435" r="13" />
		<circle id="150" cx="315" cy="15" r="13" />
		<circle id="151" cx="315" cy="45" r="13" />
		<circle id="152" cx="315" cy="75" r="13" />
		<circle id="153" cx="315" cy="105" r="13" />
		<circle id="154" cx="315" cy="135" r="13" />
		<circle id="155" cx="315" cy="165" r="13" />
		<circle id="156" cx="315" cy="195" r="13" />
		<circle id="157" cx="315" cy="225" r="13" />
		<circle id="158" cx="315" cy="255" r="13" />
		<circle id="159" cx="315" cy="285" r="13" />
		<circle id="160" cx="315" cy="315" r="13" />
		<circle id="161" cx="315" cy="345" r="13" />
		<circle id="162" cx="315" cy="375" r="13" />
		<circle id="163" cx="315" cy="405" r="13" />
		<circle id="164" cx="315" cy="435" r="13" />
		<circle id="165" cx="345" cy="15" r="13" />
		<circle id="166" cx="345" cy="45" r="13" />
		<circle id="167" cx="345" cy="75" r="13" />
		<circle id="168" cx="345" cy="105" r="13" />
		<circle id="169" cx="345" cy="135" r="13" />
		<circle id="170" cx="345" cy="165" r="13" />
		<circle id="171" cx="345" cy="195" r="13" />
		<circle id="172" cx="345" cy="225" r="13" />
		<circle id="173" cx="345" cy="255" r="13" />
		<circle id="174" cx="345" cy="285" r="13" />
		<circle id="175" cx="345" cy="315" r="13" />
		<circle id="176" cx="345" cy="345" r="13" />
		<circle id="177" cx="345" cy="375" r="13" />
		<circle id="178" cx="345" cy="405" r="13" />
		<circle id="179" cx="345" cy="435" r="13" />
		<circle id="180" cx="375" cy="15" r="13" />
		<circle id="181" cx="375" cy="45" r="13" />
		<circle id="182" cx="375" cy="75" r="13" />
		<circle id="183" cx="375" cy="105" r="13" />
		<circle id="184" cx="375" cy="135" r="13" />
		<circle id="185" cx="375" cy="165" r="13" />
		<circle id="186" cx="375" cy="195" r="13" />
		<circle id="187" cx="375" cy="225" r="13" />
		<circle id="188" cx="375" cy="255" r="13" />
		<circle id="189" cx="375" cy="285" r="13" />
		<circle id="190" cx="375" cy="315" r="13" />
		<circle id="191" cx="375" cy="345" r="13" />
		<circle id="192" cx="375" cy="375" r="13" />
		<circle id="193" cx="375" cy="405" r="13" />
		<circle id="194" cx="375" cy="435" r="13" />
		<circle id="195" cx="405" cy="15" r="13" />
		<circle id="196" cx="405" cy="45" r="13" />
		<circle id="197" cx="405" cy="75" r="13" />
		<circle id="198" cx="405" cy="105" r="13" />
		<circle id="199" cx="405" cy="135" r="13" />
		<circle id="200" cx="405" cy="165" r="13" />
		<circle id="201" cx="405" cy="195" r="13" />
		<circle id="202" cx="405" cy="225" r="13" />
		<circle id="203" cx="405" cy="255" r="13" />
		<circle id="204" cx="405" cy="285" r="13" />
		<circle id="205" cx="405" cy="315" r="13" />
		<circle id="206" cx="405" cy="345" r="13" />
		<circle id="207" cx="405" cy="375" r="13" />
		<circle id="208" cx="405" cy="405" r="13" />
		<circle id="209" cx="405" cy="435" r="13" />
		<circle id="210" cx="435" cy="15" r="13" />
		<circle id="211" cx="435" cy="45" r="13" />
		<circle id="212" cx="435" cy="75" r="13" />
		<circle id="213" cx="435" cy="105" r="13" />
		<circle id="214" cx="435" cy="135" r="13" />
		<circle id="215" cx="435" cy="165" r="13" />
		<circle id="216" cx="435" cy="195" r="13" />
		<circle id="217" cx="435" cy="225" r="13" />
		<circle id="218" cx="435" cy="255" r="13" />
		<circle id="219" cx="435" cy="285" r="13" />
		<circle id="220" cx="435" cy="315" r="13" />
		<circle id="221" cx="435" cy="345" r="13" />
		<circle id="222" cx="435" cy="375" r="13" />
		<circle id="223" cx="435" cy="405" r="13" />
		<circle id="224" cx="435" cy="435" r="13" />
                        </svg>
    </div>
    <div class="board">
      <h3>你选择了[<span id="color">未选</span>]</h3>
      <h3>胜[<span id="win">待定</span>]</h3>
    </div>
    </div>

    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

    <script>
     var win = 0;
     var gArray = Array(225).fill(0);
     var url = 'next';

     init('black');
     genInit();

     function genInit() {
	 $.get('/gens', function (res) {
	     gens = JSON.parse(res);
	     for (i in gens) {
		 $("#gen").append('<option value="' + gens[i] + '">第' + gens[i] + '代</option>');
	     }
	 });
     }

     function init(c) {
	 gArray = Array(225).fill(0);
	 if (c == 'white') {
	     color = c;
	     cn = 7;
	     $.post(url, {
		 gen: $("#gen").val(),
		 input: JSON.stringify(gArray),
		 color: cn
	     }, function (res) {
		 data = JSON.parse(res);
		 gArray = data.next;
		 win = data.win;
		 draw(gArray);
	     });
	     $("#color").text("白方");
	 } else {
	     win = 0;
	     color = 'black';
	     cn = 1;
	     draw(gArray);
	     $("#color").text("黑方");
	 }
	 $("#win").text("待定");
     }

     var color = "black";
     var cn = 1;
     $("circle").click(function () {
	 if (win != 0) {
	     return;
	 }
	 var index = $(this).attr("id");
	 if (gArray[index] == 0) {
	     $(this).addClass(color);
	     gArray[index] = cn;
	     $.post(url, {
		 gen: $("#gen").val(),
		 input: JSON.stringify(gArray),
		 color: cn
	     }, function (res) {
		 data = JSON.parse(res);
		 gArray = data.next;
		 win = data.win;
		 wined(win);
		 draw(gArray);
	     });
	 }
     });
     
     $("#playB").click(function () {
	 init('black');
     });
     $("#playW").click(function () {
	 init("white");
     });

     function draw(arr) {
	 $("circle").each(function (i, v) {
	     $(v).removeClass("black");
	     $(v).removeClass("white");
	 });
	 for (var i = 0; i < 225; i++) {
	     if (arr[i] == 1) {
		 $("#" + i).addClass("black");
	     } else if (arr[i] == 7) {
		 $("#" + i).addClass("white");
	     }
	 }
     }

     function wined(win) {
	 switch (win) {
	     case 1:
		 $("#win").text("黑方");
		 alert("黑胜");
		 break;
	     case 2:
		 $("#win").text("和棋");
		 alert("和棋");
		 break;
	     case 7:
		 $("#win").text("白方");
		 alert("白胜");
		 break;
	     default:
		 break;
	 }
     }
    </script>
  </body>
</html>
